<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:border-radius="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        /* 设置body元素的背景图片 */
        *{
            color: rgb(16, 91, 6);
        }
        body {
            background-image: url('pic/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        #totals-a{
            padding-left: 100px;
            padding-right: 100px;
            padding-top: 20px;
        }

        .foods{
            border:none;
            height: 280px;
            width: 230px;
            float: left;
            margin-left: 25px;
            margin-top: 15px;
            margin-bottom: 10px;
            /*border-radius: 18px;*/
        }

        /*.foods:hover{*/
        /*    height: 160px;*/
        /*    width: 240px;*/
        /*}*/
        #left{
            border-radius: 25px;
        }
        #right{
            /*border-radius: 18px;*/
        }
        .foods-left{
            margin-left: 30px;
            font-size: 20px;
            /*color: darkgray;*/
            margin-top: 25px;
        }

        .foods-left:hover {
            color: #67ee04;
            font-size: 20px;
        }

        span{
            margin-left: 20px;
            font-size: 18px;
            color: darkgray;
        }
         a {
            text-decoration: none; /* 去除下划线 */
        }
        span a :hover{
            color: rgb(45, 154, 31);
            font-size: 20px;
        }
        #right-butt{
            /*border-radius: 5px;*/
            background-color: white;
        }
        #right-butt:hover{
            color: rgb(45, 154, 31);
        }
    </style>
</head>
<body id="app">

<div  >
    <div id="head-a" style="padding-top: 20px">

        <div style="float: left;margin-left: 20%;">
            <div style="font-family: 幼圆;font-size:36px;color: rgb(45, 154, 31);filter: saturate(200%);float: left;padding-right: 20px">早餐</div>
            <div style="float: left;font-size:20px;margin-top: 5px;padding-right: 20px"><a href="index.html">首页</a></div>
            <input type="text" name="" id="foodsName" style="width: 400px;height: 35px">
            <button v-on:click="getBooksByName" style="width: 50px;height: 35px;margin-left: 20px">搜索</button>
        </div>
        <div style="margin-top: 5px">
            <!--判断用户登录-->
            <span v-if="this.clients.id==-1">
        <span><a href="/registraion.html">注册</a></span>
        <span><a href="/login.html">登录</a></span>
    </span>

            <span v-if="this.clients.id!=-1">
        <span v-text="'用户:'+this.clients.name"></span>
        <span><a href="/cart.html">购物车</a></span>
        <span><a href="/orders.html">我的订单</a></span>
        <span v-on:click="this.unlogin()">退出</span>
    </span>
            <span>
        <a href="/admin/login.html">   进入管理者</a>
    </span>
        </div>


    </div>

    <div style="clear: both"></div>
    <div id="totals-a">
        <div id="left" style="float: left;width:200px;height:300px;background-color: antiquewhite" >
            <div v-on:click="this.getAllFoods()"style="font-size: 24px" class="foods-left">所    有</div>
            <div v-on:click="this.getFoodsByTypesId(1)" class="foods-left">粥  类</div>
            <div v-on:click="this.getFoodsByTypesId(2)" class="foods-left">包子类</div>
            <div class="foods-left">小炒盖饭类</div>
            <div class="foods-left">面粉类</div>
        </div>

        <div id="right" style="float: left;width:calc(100% - 210px);background-color:white;margin-left: 10px">
            <div  class="foods" v-for="foods in foodsList">
                    <div style="">
                        <img v-bind:src="foods.pic" width="230" height="190">
                    </div>
                    <div v-text="foods.name" style=""></div>
                    <div v-text="foods.detail" style=""></div>
                    <div v-text="'￥'+foods.price+'元'">
                    </div>

                <div style="float: left;" >
                    <button style="background-color: white;margin-left: 20px"><a v-bind:href="'/foods.html?id='+foods.id" style="text-decoration: none;">立即购买</a></button>
                </div>
                    <div style="margin-left: 120px">
                        <button v-on:click="this.saveCart(foods.id)" id="right-butt">加入购物车&nbsp;&nbsp;</button>
                    </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //定义app
    const app = {

        //数据绑定
        data() {
            return {
                //食品列表
                foodsList: [],

                //已经登录的客户
                clients:{id:-1}
            }
        },
        //事件绑定
        methods: {
            //获取所有食品
            getAllFoods: function () {
                axios({
                    method: "post", url: "/getAllFoods", data: {}
                }).then((response) => {
                    this.foodsList=response.data
                });
            },

            //按名字查询食品
            getBooksByName: function () {
                axios({
                    method: "post", url: "/getBooksByName", data: {
                        name:document.getElementById("foodsName").value
                    }
                }).then((response) => {
                    this.foodsList=response.data
                });
            },
            //按类型获取食品
            getFoodsByTypesId:function (typesId) {
                axios({
                    method: "post", url: "/getFoodsByTypesId", data: {
                        typesId:typesId
                    }
                }).then((response) => {
                    this.foodsList=response.data
                });
            },
            //获取登录客户
            getLoginClients:function () {
                axios({
                    method: "post", url: "/getLoginClients", data: {}
                }).then((response) => {
                    this.clients=response.data
                });
            },
            //退出登录
            unlogin:function (typesId) {
                axios({
                    method: "post", url: "/unlogin", data: {}
                }).then((response) => {
                    alert(response.data)
                    window.location.reload() // 刷新
                });
            },
            saveCart:function (foodsId) {
                axios({
                    method: "post", url: "/saveCart", data: {
                        foodsId:foodsId,
                        num:this.num
                    }
                }).then((response) => {
                    alert("加入成功！")
                });
            },
        },


        //构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getAllFoods()
            this.getLoginClients();
        }
    }

    //启动app
    Vue.createApp(app).mount("#app")
</script>
</html>